<template>
	<view>
		<view class="">
			<view class="tbs">
				<van-tabs>
					<van-tab title="服务卷" v-model='active'>
						<view class="coupon-cens">
							<view class="coupon-cen">
								<view class="coupon-left">
									<view class="coup">
										<view class="price">￥10</view>
										<view class="price_choose">满100元使用</view>
									</view>
								</view>
								<view class="coupon-con">
									<view class="coupon-text1">洗剪吹优惠卷</view>
									<view class="coupon-text2">领券当日生效，生效起180天内可用</view>
									<view class="coupon-text3">已领取：0张 剩余：1000张</view>
								</view>
								<view class="coupon-right">
									<text>领取</text>
								</view>
								
							</view>
							<view style="padding: 15rpx; font-size: 30rpx;">限成都武侯沙龙美容美发店</view>
						</view>
						<view class="coupon-cens">
							<view class="coupon-cen">
								<view class="coupon-left">
									<view class="coup">
										<view class="price">￥10</view>
										<view class="price_choose">满100元使用</view>
									</view>
								</view>
								<view class="coupon-con">
									<view class="coupon-text1">洗剪吹优惠卷</view>
									<view class="coupon-text2">领券当日生效，生效起180天内可用</view>
									<view class="coupon-text3">已领取：0张 剩余：1000张</view>
								</view>
								<view class="coupon-right">
									<text>领取</text>
								</view>
								
							</view>
							<view style="padding: 15rpx;font-size: 30rpx;">限成都武侯沙龙美容美发店</view>
						</view>
					</van-tab>
					<van-tab title="商品卷">

					</van-tab>
					<van-tab title="已结束">

					</van-tab>

				</van-tabs>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #EEEEEE;
	}

	.tbs {
		margin-top: 20rpx;

		/deep/.van-tabs__nav {
			border-bottom: 1px solid #EEEEEE;
		}

		/deep/.van-tabs__wrap {
			margin-bottom: 0 !important;
			// height: 0;
		}


		.coupon-cens {
			padding: 0 20rpx;
			background-color: #fff;
			margin-bottom: 20rpx;

			.coupon-cen {
				display: flex;
				padding: 25rpx 0;
				

				.coupon-left {
					width: 201rpx;
					height: 120rpx;

					background: #00C6C2;
					border-radius: 4px;
					text-align: center;

					.coup {
						padding: 20rpx 22rpx;

						.price {
							font-size: 36rpx;
							font-family: PingFang;
							font-weight: bold;
							color: #FFFFFF;
						}

						.price_choose {
							font-size: 26rpx;
							font-family: PingFang;
							font-weight: bold;
							color: #FFFFFF;
						}
					}

				}

				.coupon-con {
					// width: 50%;
					margin-left: 10rpx;

					.coupon-text1 {
						font-size: 28rpx;
						font-family: PingFang;
						font-weight: 500;
						color: #000000;

					}

					.coupon-text2 {
						font-size: 20rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #8A8A8A;
						padding: 15rpx 0;
					}

					.coupon-text3 {
						font-size: 20rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #8A8A8A;
					}
				}

				.coupon-right {
					// width: 20%;
						margin-left: 40rpx;
					text {
						margin-top: 40rpx;
						display: inline-block;
						padding: 10rpx 21px;
						background-color: #00C6C2;
						color: #fff;
						font-size: 26rpx;
						font-family: PingFang;
						font-weight: bold;
						border-radius: 45rpx;
					}
				}
			}
		}
	}

	.van-tabs__wrap {
		display: -webkit-flex;
		display: flex;
		overflow: hidden;
		height: 100rpx;
		margin-bottom: 20rpx;
	}
</style>
